<template>
    <div class="integral">
        <x-header v-show="!isWeChar" class="myHeader">
            <div slot="default" class="common__header--title">{{pageTitle}}
                <span v-show="integral.showType!=''">({{integral.showType}})</span>
            </div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="integral_type_list">
            <scroller :lock-x="false" lock-y>
                <div class="item_btn">
                    <checker v-model="selectCurType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item :value="item.key" v-for="(item, index) in thisTypeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </scroller>
        </div>

        <div class="row_list">
            <transition name="slide-fade">
                <!-- max-width:750px; 此宽度用于整体页面固定时-->
                <vue-scroller v-show="showAnimate" :style="scrollerTop" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <div id="row_list" class="weui-panel weui-panel_access">
                        <div class="integral_row" v-for="(item, index) in integral.curIntegralList" :key="index" @click="goBean(item.id,item.in_out_type)">
                            <div class="top">
                                <ul>
                                    <li class="title">{{item.change_type | filter_change_type}}</li>
                                    <!-- 1=活动，显示 -->
                                    <li class="desc" v-if="item.change_type =='1' || item.change_type =='2'">{{item.reason}}</li>
                                    <li class="desc" v-else>{{item.remark}}</li>
                                    <li class="number">
                                        <span>{{item.in_out_type == 1 ? '+' : ''}}{{item.re_changescore}}</span> 宝豆</li>
                                </ul>
                            </div>
                            <div class="bottom">{{item.change_time}}</div>
                        </div>
                    </div>
                </vue-scroller>
            </transition>
        </div>
    </div>
</template>

<script>
import vueScroller from "src/common/vueScroller/components/Scroller";
import Config from "src/common/config/integralConfig";
import DateUtil from "src/common/util/dateUtil";
import { RouteUrl, Mutations } from "src/common/const";
import { XHeader, XInput, XButton, Scroller, Checker, CheckerItem } from "vux";
import { mapState } from "vuex";
export default {
    components: { XHeader, XInput, XButton, vueScroller, Scroller, Checker, CheckerItem },
    computed: mapState(["user", "isWeChar", "integral"]),
    data() {
        return {
            pageTitle: "宝豆明细",
            selectCurType: Config.getIntegralType(0).key,//默认选项
            thisTypeList: Config.getIntegralTypeAll(),//类型列表
            scrollerTop: "position: fixed;padding-top: 88px;padding-bottom: 690px;z-index:0;",
            showAnimate: true,//显示刷新卡片
        }
    },
    filters: {
        //变更类型名称
        filter_change_type(val) {
            if (typeof (val) != 'undefined' && val != null && val.length > 0) {
                //积分变更类型
                val = Config.getIntegralChangeType(val);
            } else {
                val = "未知";
            }
            return val;
        },
    },
    watch: {
        selectCurType(cur, old) {
            this.showAnimate = false;
            let _this = this;
            //懒加载追加新请求的数据列表
            this.queryDataByType("infinite");
            setTimeout(function () {
                _this.showAnimate = true;
            }, 100);
        }
    },
    methods: {
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.MY_INTEGRAL);//返回
        },
        goBean(id, in_out_type) {
            if (!this.user.isLogin) {
                this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
                return;
            }
            let data = {
                _this: this,
                id: id,
                in_out_type: in_out_type
            };
            this.$common.storeCommit(this, Mutations.INTEGRAL_DETAIL, data);
        },
        //页面刷新
        refresh(done) {
            let _this = this;
            $("#row_list").fadeOut();
            setTimeout(() => {
                _this.queryDataByType("refresh", done);
                done();
            }, 500);
            $("#row_list").fadeIn();
        },
        //当用户滚动的距离超出底部的内容时触发;
        infinite(done) {
            let _this = this;
            setTimeout(() => {
                _this.queryDataByType("infinite", done);
                done(_this.integral.inOrOutIsEnd);
            }, 500);
        },
        queryDataByType(operation, done) {
            let queryData = {
                _this: this,
                userCode: this.user.userDto.userCode,
                operation: operation,
                selectCurType: this.selectCurType,
                done: done
            };
            this.inOrOutIsQuery = true;//可查询
            this.$common.storeCommit(this, Mutations.INTEGRAL_IN_OR_OUT_LIST, queryData);
        },
        //初始化当前页面
        initPage() {
            //及时更新状态保持里的选择类型
            this.selectCurType = this.integral.selectCurType;
            //设置滚动区域底部距离
            // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
            this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 620);
            this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多明细了");
            if (this.isWeChar) {
                this.scrollerTop = "position: fixed;padding-top: 40px;padding-bottom: 690px;z-index:0;"
            }
        },
    },
    created() {
        if (!this.user.isLogin) {
            this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
            return;
        }
    },
    mounted() {
        document.title = this.pageTitle;
        this.$init.subPageInit(this);
        //初始化当前页面
        this.initPage();
    }
}
</script>

<style lang="scss" scoped>
.integral {
  width: 100%;
  height: 100vh;
  .myHeader {
    z-index: 2;
  }
  //类型选择
  .integral_type_list {
    position: relative;
    height: 35px;
    padding: 5px 20px 0px 20px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
    //none：禁止触发默认的手势操作
    //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
    //pan-y：可以在父级元素内进行垂直移动的手势操作。
    //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
    //touch-action只支持具有CSS width和height属性的元素
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  //类型单个按钮
  .item_btn {
    width: max-content;
    text-align: center;
  }

  .row_list {
    position: relative; // max-width: 750px;
    background-color: #C8161D;
    .integral_row {
      height: 70px;
      padding: 5px 8px;
      background-color: white;
      border-bottom: 1px solid #eee;
      .top {
        height: 40px;
        line-height: 40px;
        ul {
          .title {
            width: 22%;
            text-align: center;
          }
          .desc {
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .number {
            width: 28%;
            float: right;
            color: #C8161D;
            text-align: center;
            span {
              font-weight: bold;
              font-size: 14px;
            }
          }
          li {
            list-style: none;
            height: 100%;
            float: left;
            font-size: 12px;
          }
        }
      }
      .bottom {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: gray;
        padding-left: 20px;
      }
    }
  }
}
</style>

